<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动事件</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin:0; background:#000; color:#fff;
        }
        /* 全局样式 */
        main{
            width:400px;
            height:200px;
            border:solid 2px #ddd;
            position:absolute;
            top:calc(50% - 100px);
            left:calc(50% - 200px);
        }
        h2{
            margin:0;
            font-weight: normal;
            font-size:20px;
            text-align: right;
            border-bottom:solid 2px #ddd;
            line-height:40px;
            padding:0 10px;
            cursor:move;
        }
        a{
            color:#fff;
            text-decoration: none;
        }
        div{
            padding:15px;
        }
        span{
            color:yellow;
        }
    </style>
</head>
<body>
<main>
    <h2><a href="javascript:;"> 点击回放运动轨迹 </a> </h2>
    <div>
        <p> Drag: <span>  </span> </p>
        <p> offsetTop: <span>  </span> </p>
        <p> offsetLeft: <span>  </span> </p>
    </div>
</main>
<script>
    // 设置所有的标签元素
    var h2 = document.querySelector('h2')
    var a = document.querySelector('a')
    var span1 = document.querySelector('span')
    var span2 = document.querySelectorAll('span')[1]
    var span3 = document.querySelectorAll('span')[2]
    var main = document.querySelector('main')
    var mainX,mainY,lenX, lenY
    var drag = false   // 初始的拖动值--未拖动
    var pos = [{
        x:main.offsetLeft,
        y:main.offsetTop
    }]
//    console.log(pos)
//    设置main的偏移量的初始状态值
    function status(){
        span1.innerHTML = drag
        span2.innerHTML = main.offsetTop
        span3.innerHTML = main.offsetLeft
    }
    status()
//  当鼠标按下时，激活拖拽事件
    h2.onmousedown = function(ev){
        drag = true
        lenX = ev.clientX - main.offsetLeft
        lenY = ev.clientY - main.offsetTop
        pos.push({
            x:main.offsetLeft,
            y:main.offsetTop
        })
//  mousedown事件处理中，这个方法的全部鼠标事件重新
//      定向为该元素，直到鼠标按钮被释放
        this.setCapture()
    }
// 拖拽开始，并设定拖拽范围
    document.onmousemove = function(ev){
        if( !drag ) return
//     if( drag == false ) return
    //  拖动过程中，main的left、top偏移量
        mainX = ev.clientX - lenX
        mainY = ev.clientY - lenY
    //  解决浏览器大小改变时超出窗口的行为
        var w = document.documentElement.clientWidth
        var h = document.documentElement.clientHeight
        var maxL = w - main.offsetWidth
        var maxT = h - main.offsetHeight
    //  设定偏移的最大值和最小值
        mainX = mainX < 0 ? 0 : mainX
        mainY = mainY < 0 ? 0 : mainY
        mainX = mainX > maxL ? maxL : mainX
        mainY = mainY > maxT ? maxT : mainY
    //  赋值
        main.style.left = mainX + 'px'
        main.style.top = mainY + 'px'
    //  添加运动轨迹
        pos.push({x:mainX, y:mainY})
        status()
    }
//  鼠标松开时，拖拽释放
    document.onmouseup = function(){
        drag = false
        status()
    }

//    鼠标点击的时候，回放运动轨迹
    a.onclick = function(){
// pop() 删除并返回数组的最后一个元素，原数组被更改
        var timer = setInterval(function(){
            var posRe = pos.pop()
            if( pos.length < 1 ){
                clearInterval(timer)
            }
            main.style.left = posRe.x + 'px'
            main.style.top = posRe.y + 'px'
            status()
        }, 30)
    }
//    阻止冒泡事件
    a.onmousedown = function(ev){
        ev.cancelBubble = true
    }
</script>
</body>
</html>